<ion-header>
    <ion-navbar core-back-button>
        <ion-title><core-format-text [text]="title" contextLevel="coursecat" [contextInstanceId]="currentCategory && currentCategory.id"></core-format-text></ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-refresher [enabled]="categoriesLoaded" (ionRefresh)="refreshCategories($event)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="categoriesLoaded">
        <ion-item *ngIf="currentCategory" text-wrap>
            <ion-icon name="folder" item-start></ion-icon>
            <h2><core-format-text [text]="currentCategory.name" contextLevel="coursecat" [contextInstanceId]="currentCategory.id"></core-format-text></h2>
        </ion-item>
        <ion-item text-wrap *ngIf="currentCategory && currentCategory.description">
            <core-format-text [text]="currentCategory.description" maxHeight="60" contextLevel="coursecat" [contextInstanceId]="currentCategory.id"></core-format-text>
        </ion-item>

        <div *ngIf="categories.length > 0">
            <ion-item-divider>{{ 'core.courses.categories' | translate }}</ion-item-divider>
            <section *ngFor="let category of categories">
                <a ion-item text-wrap (click)="openCategory(category.id)" [title]="category.name">
                    <ion-icon name="folder" item-start></ion-icon>
                    <h2><core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id"></core-format-text></h2>
                    <ion-badge item-end *ngIf="category.coursecount > 0" color="light">{{category.coursecount}}</ion-badge>
                </a>
            </section>
        </div>

        <div *ngIf="courses.length > 0">
            <ion-item-divider>{{ 'core.courses.courses' | translate }}</ion-item-divider>
            <core-courses-course-list-item *ngFor="let course of courses" [course]="course"></core-courses-course-list-item>
        </div>
        <core-empty-box *ngIf="!categories.length && !courses.length" icon="ionic" [message]="'core.courses.nocoursesyet' | translate">
            <p *ngIf="searchEnabled">{{ 'core.courses.searchcoursesadvice' | translate }}</p>
        </core-empty-box>
    </core-loading>
</ion-content>
